<template>
	<label class="hcj_checkbox">
		<span class="hcj_checkbox_input">
			<span 
			:class="{'hcj_checkbox_checked': isGroupActive}"
			class="hcj_checkbox_inner"></span>
			<input 
			v-model="checked"
			type="checkbox"
			:value="label"
			class="hcj_checkbox_original"
			:name="name"
			>
		</span>
		<span class="hm_checkbox_label">
			<slot>{{ label }}</slot>
		</span>
	</label>
</template>

<script>
	export default {
		props: {
			label: {
				type: [String, Number, Boolean],
				default: ''
			},
			value: {
				type: [String, Number, Boolean],
				default: ''
			},
			name: {
				type: String,
				default: ''
			}
		},
		inject: {
			checkboxGroup: {
				default: ''
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		},
		computed: {
			checked: {
				get() {
					return this.isGroup ? this.checkboxGroup.value : this.value
				},
				set(value) {
					this.isGroup ? this.checkboxGroup.$emit('input',value) : this.$emit('input',value)
				}
			},
			isGroup() {
				return !!this.checkboxGroup
			},
			isGroupActive() {
				return this.isGroup ? this.checked.includes(this.label) : this.checked
			}
		}
	}
</script>

<style scoped>
	.hcj_checkbox {
		display: inline-flex;
		text-align: center;
	}
	.hcj_checkbox_input {
	}
	.hcj_checkbox_inner {
		background-color: #fff;
		display: inline-block;
		border: 1px solid gray;
		border-radius: 50%;
		width: 15px;
		height: 15px;
		vertical-align: middle;
	}
	.hcj_checkbox_original {
		position: absolute;
		width: 0;
		height: 0;
		opacity: 0;
		margin: 0;
	}
	.hcj_checkbox_label {
		padding-left: 5px;
		vertical-align: bottom;
	}
	
	.hcj_checkbox_checked {
		background-color: #2c3e50;
		border: 1px solid gray;
	}
</style>